<template>
  <!-- 创建时间：2023/4/20 -->
  <!-- 作者：admin -->
  <!-- SingerDetailHeader组件说明： 歌手详情页面头部部分-->
    <el-row>
        <el-col :span="5">
            <ItemImg :image-detail="imageDetail"/>
        </el-col>
        <el-col :span="18" :offset="1">
            <div>
                <div class="list-title">{{ details.name }}</div>
                <div class="list-creator">
                    艺人
                </div>
                <div class="list-update-time">
                    {{ details.musicSize }}首歌·{{ details.albumSize }}张专辑·{{ details.mvSize }}个Mv
                </div>
                <div class="list-des">
                    {{ details.description }}
                </div>
            </div>
            <!-- 播放按钮部分-->
            <div class="song-list-fun">
                <div class="song-list-play">
                    <font-awesome-icon icon="fas fa-play" class="play-count-icon"/>
                    <span>播放</span>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import ItemImg from "@/minicomponents/ItemImg.vue";

export default {
    name: "SingerDetailHeader",
    components: {ItemImg},
    props: ['details'],
    data() {
        return {
            title: '艺人介绍',
            // details: {
            //     id: 6452,
            //     avatar: 'http://p1.music.126.net/Esjm32Q05PQoX8pF008u7w==/109951165793871057.jpg',
            //     name: '周杰伦',
            //     albumSize: 40,
            //     musicSize: 528,
            //     mvSize: 8,
            //     alias: [
            //         "Jay Chou",
            //         "周董",
            //     ],
            //     description: "周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、原创音乐人、演员、导演、编剧，毕业于淡江中学。\n2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格。2002年举行“The One”世界巡回演唱会。2003年成为美国《时代周刊》封面人物。2004年获得世界音乐大奖中国区最畅销艺人奖。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖。\n2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力的人物”，同年获得第20届金曲奖最佳国语男歌手奖。2010年入选美国《Fast Company》评出的“全球百大创意人物”。2011年再度获得金曲奖最佳国语男歌手奖，并且第4次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》。2012年登福布斯中国名人榜榜首。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》。2019年起举行“嘉年华”世界巡回演唱会。\n演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司。2011年担任华硕笔电设计师并入股香港文化传信集团。\n周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学。2014年担任中国禁毒宣传形象大使。",
            // }
        }
    },
    computed: {
        imageDetail() {
            return {
                picUrl: this.details.avatar,
                isShowInfo: false,
                isRound: true,
                playCount: 0,
                hasPlayIcon: true
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "../assets/less/common";

@fontSize: .8vw;

.el-row {
  cursor: default;
}

.list-title {
  font-size: 1.7vw;
  font-weight: bolder;
  margin: 1vw 0;
}

.list-creator {
  font-size: .9vw;
  font-weight: 400;

  a:hover {
    text-decoration: underline;
  }
}

.list-update-time {
  font-size: @fontSize;
  font-weight: 300;
}

.list-des {
  font-size: @fontSize;
  margin-top: 1.3vw;
  font-weight: 300;
  height: 3.3vw;
  /*多行文字溢出显示省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  /*弹性盒子模型显示*/
  display: -webkit-box;
  /*限制在一个块元素内显示文本的行数*/
  -webkit-line-clamp: 3;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient: vertical;
}

.song-list-fun {
  margin-top: 1.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .song-list-play {
    color: @mainColor;
    font-size: .9vw;
    font-weight: 700;
    background-color: @bgColor;
    padding: .5vw .8vw;
    border-radius: .5vw;
    cursor: pointer;
    transition: all .2s ease;

    > span {
      margin-left: .4vw;
    }
  }
}
</style>